<template>
  <div id="tmpl">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in swipeList">
        <a>
          <img v-bind:src="item.img">
        </a>
      </mt-swipe-item>
    </mt-swipe>

    
  <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to="/news/newslist">
        <span class="mui-icon mui-icon-home"></span>
        <div class="mui-media-body">新闻资讯</div>
      </router-link>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to="/photo/photolist">
        <span class="mui-icon mui-icon-email"></span>
        <div class="mui-media-body">图片分享</div>
      </router-link>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to="/">
        <span class="mui-icon mui-icon-chatbubble"></span>
        <div class="mui-media-body">商品购买</div>
      </router-link>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to="/">
        <span class="mui-icon mui-icon-location"></span>
        <div class="mui-media-body">留言反馈</div>
      </router-link>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to="/">
        <span class="mui-icon mui-icon-search"></span>
        <div class="mui-media-body">视频专区</div>
      </router-link>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to="/">
        <span class="mui-icon mui-icon-search"></span>
        <div class="mui-media-body">联系我们</div>
      </router-link>
    </li>
  </ul>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import common from "./kits/common"
export default {
 data(){
    return {
      swipeList:[]
    }
  },
  created(){
    this.getImg();
  },
  methods:{
    getImg(){
      var url = common.domain +"/api/getlunbo";
      this.$http.get(url).then(
        response => {
          var data = response.body;
          if(data.status != 0){
            Toast(data.message);
            return;
          }
          this.swipeList = data.message;
        }
      );
    }
  }
}
</script>


<style lang="less" scoped>
  .mint-swipe{
    background-color: #ccc;
    height: 300px;
    .mint-swipe-item{
      img{
        width: 100%;
      }
    }
  }
  
.mui-grid-view.mui-grid-9 {
  border: 0px;
  background-color: #fff;
  .mui-table-view-cell {
    border: none;
    .mui-icon-home,
    .mui-icon-email,
    .mui-icon-chatbubble,
    .mui-icon-location,
    .mui-icon-search,
    .mui-icon-phone {
      &:before {
        content: "";
        display: inline-block;
        height: 50px;
        width: 50px;
        background-repeat: round;
      }
    }
    .mui-icon-home:before{
      background-image: url(../../statics/imgs/1.png);
    }
    .mui-icon-email:before{
      background-image: url(../../statics/imgs/2.png);
    }
    .mui-icon-chatbubble:before{
      background-image: url(../../statics/imgs/3.png);
    }
    .mui-icon-location:before{
      background-image: url(../../statics/imgs/4.png);
    }
    .mui-icon-search:before{
      background-image: url(../../statics/imgs/5.png);
    }
    .mui-icon-phone:before{
      background-image: url(../../statics/imgs/5.png);
    }
  }
}

</style>

